<template>
<div>
	<div class="head">
		<a href="#/"><img class="left-arrow" src="../assets/img/duanhuowang/zuo.png" alt=""/></a>
		<span class="xiaoxi">消息中心</span>
	</div>
	<!--推荐-->
	<div class="x-tui">
		<p class="tui-biao">2017年06月20日10:44</p>
		<!--新品推荐-->
		<a href="#/BenzhouXinpin">
		<div class="xshi">
			<h1>新品推荐</h1>
			<!--新品上市-->
			<p class="shashi">
				<img class="xt" src="../assets/img/shouye/xiaoxi/8huo.png" alt=""/>
				<span class="an-jie">新品上市啦！时间不多了，赶紧行动起来吧！</span>
			</p>
			<!--查看更多-->
			<p class="chakan">
				<span>查看更多</span>
				<img src="../assets/img/fenlei/more.png" alt=""/>
			</p>
		</div>
		</a>
	</div>
	<!--安全提醒-->
	<div class="an-tui">
		<p class="tui-biao">2017年06月20日11:12</p>
		<!--新品推荐-->
		<div class="an-shi">
			<h1>安全提醒</h1>
			<!--新品上市-->
			<p class="an-shashi">
				<img class="xt" src="../assets/img/shouye/xiaoxi/8jiao.png" alt=""/>
				<span class="an-jie">近期有不法分子冒充阿拉灯客服进行诈骗，请认准阿拉灯官方客服电话
4000123456</span>
			</p>
		</div>
	</div>
	<!--收货啦-->
		<div class="an-tui">
		<p class="tui-biao">2017年06月20日11:12</p>
		<!--新品推荐-->
		<div class="an-shi">
			<h1>收货啦！</h1>
			<!--新品上市-->
			<p class="an-shashi">
				<img class="xt" src="../assets/img/shouye/xiaoxi/8shou.png" alt=""/>
				<span class="an-jie">你的货物到站了，请注意查收哦~</span>
			</p>
		</div>
	</div>
</div>
</template>

<script>
</script>

<style>
	.head{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 9.6rem;
		background:#e53e42;
	}
	.head img{
		position: absolute;
		width: 2.3rem;
		height: 3.5rem;
		left: 2rem;
		top: 2.9rem;
		
	}
	.xiaoxi{
		position: absolute;
		font-size:3.5rem;
		color:#ffffff;
		left: 28.7rem;
		top: 2.5rem;
	}
.x-tui{
	width: 100%;
	height: 41rem;
	margin-top: 9.6rem;
	box-sizing: border-box;
}
.tui-biao{
	color:#808080;
	width: 100%;
	height: 9rem;
	line-height: 9rem;
	font-size: 2.8rem;
	text-align: center;
}
/**/
.xshi,.an-shi{
	width: 64rem;
	background: #FFFFFF;
	margin:auto;
	padding:0 2rem;
	border: 0.1rem solid #CCCCCC;
	border-radius: 1rem;
}
.an-shi{
	height: 24rem;
}
h1{
	width: 100%;
	height: 7rem;
	line-height: 7rem;
	font-size: 3rem;
	color:#4d4d4d;
}
.xshi>p{
	width:100%;
}
.shashi{
	height: 17rem;
	border-bottom: 0.1rem solid #CCCCCC;
}
.xt{
	width: 13rem;
	height: 14rem;
	float:left;
	padding-right: 1rem;
}
.an-jie{
	display:inline-block;
	width: 48rem;
	font-size: 2.8rem;
	padding:0 1rem;
	color: #808080;
}
.chakan{
	display: flex;
	justify-content: space-between;
	font-size: 2.8rem;
	align-items: center;
	line-height: 8.1rem;
	color:#808080;
}
.chakan>img{
	width: 1.4rem;
	height: 2.4rem;
}
</style>